<template>
  <div>
    <div class="topBar">
      <el-row>
        <!--左5-->
        <el-col :span="5">
          <div class="leftBar">
            <img src="../assets/images/5GBlueTrans.png" alt=""><span style="margin-left:10px;font-weight: 700; font-size: 26px;color:white;">IT服务平台</span>
          </div>
        </el-col>
        <!--中17-->
        <el-col :span="17">
          <el-menu :default-active="activeIndex.toString()" class="el-menu-demo middle-menu" mode="horizontal"
                   @select="handleSelect" text-color="#fff" active-text-color="#fff">
            <el-menu-item :index="'0'" @click="to_home()">首页</el-menu-item>
            <el-menu-item :index="(index+1).toString()" v-for="(item,index) in this.menu" :key="index" @click="to_do(item)">
              {{ item.menuName }}
            </el-menu-item>
            <el-menu-item :index="'-2'"></el-menu-item>
            <el-menu-item :index="'-1'" @click="htgl" v-has-role="['admin']">后台管理</el-menu-item>
          </el-menu>
        </el-col>
        <!--右2-->
        <el-col :span="1">
          <div style="line-height: 30px;text-align: center;">
            <span style="font-size: 16px;color:white;">{{$store.state.user.name}}<br>{{$store.state.user.deptName}}</span>
          </div>
        </el-col>
        <el-col :span="1">
          <div class="right_box">
            <img src="../assets/images/signOut.png" @click="logout()" />
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="line">
      <router-view ref="zly"></router-view>
    </div>
  </div>
</template>
<script>
import { getList,getListByRoleId } from '@/api/menu'
import { constantRoutes } from '@/router'
import router from '@/router'
import store from '@/store'
import Router from 'vue-router'
// import VueRouter from 'vue-router'
// import Layout from '/src/layout'

export default {
  name: 'MenuNew',
  data() {
    return {
      activeIndex: 0,
      menu: [],
      role: 0,
    }
  },
  mounted() {

  },

  created() {

    //接收query参数role
    this.role = this.$route.query.role;
    //console.log("this.$store.state.user",this.$store.state.user);
    //设置高亮：默认为首页高亮
    this.activeIndex = 0
    const topMenu = JSON.parse(localStorage.getItem('topMenu'));
    if (topMenu) {
      topMenu.map((item,index) => {
        if (this.$route.path === item.query) {
          this.activeIndex = index+1
        }
      })
    }
    this.getList()
  },
  methods: {
    getActionIndex() {
      if(this.$route.path == '/FsCaterinEnterpriseTypeInfo'){
        this.activeIndex = 1;
      }
      if(this.$route.path == '/FsCaterinEnterpriseTypeDrugInfo'){
        this.activeIndex = 2;
      }
    },
    getList() {
      if(typeof this.role != "undefined"){
        let query={roleId:this.role};
        getListByRoleId(query).then((res) => {
          // alert(router);
          this.menu = res.data;
          this.getMenuRouter(this.menu);
          // this.getRoutersAddDynamic(this.menu);
        })
      }else{
        getList().then((res) => {
          // alert(router);
          this.menu = res.data;
          this.getMenuRouter(this.menu);
        })
      }
      this.getActionIndex();
    },
    getMenuRouter(menulist){
      return new Promise((resolve, reject) => {
        localStorage.setItem('topMenu', JSON.stringify(menulist))
        let newconstantRoutes = [];
        constantRoutes.forEach((item)=>{
          // console.log("item.path",item.path)
          //找到 /TopMenu
          if(item.path == '/TopMenu'){
            //console.log("item.path",item.path,menulist)
            menulist.forEach((item1)=>{
              let pathArray = item.children.map(e=>e.path);
              //console.log("pathArray",pathArray)
              if(!pathArray.includes(item1.query))
                //console.log("item.name 1 2",item.path,item1.query)
                item.children.push(
                  {
                    "name": item1.query,
                    "path": item1.query,
                    "component":  (resolve) => require(['@/views/'+item1.component], resolve),
                  }
                )
            })
          }
          newconstantRoutes.push(item);
        })
        // this.$store.dispatch('AppendRoutes', newconstantRoutes);
        console.log("//newconstantRoutes",newconstantRoutes)
        router.options.routes = [];
        router.addRoutes(newconstantRoutes);
        resolve()
      })
    },
    handleSelect(key, keyPath) {
          //console.log(key, keyPath);
        },
    to_do(row) {
      //console.log("//row.query", row.query);

      if(typeof this.role != "undefined"){
        this.$router.push(row.query+'?role='+this.role)
      }else{
        this.$router.push(row.query)
      }
    },
    to_home() {
      if(typeof this.role != "undefined"){
        this.$router.push('/homeNew'+'?role='+this.role)
      }else{
        this.$router.push('/homeNew')
      }
    },
    htgl() {
      //this.$router.push('/index')
      //window.open('/index', "_self");
      window.location.href = '/index';
    },
    to_fs() {
      this.$router.push('/FsCaterinEnterpriseInfo')
    },
    znyj() {
      this.$router.push('/znyj')
    },
    //跳转到监管服务页面
    jgfw() {
      this.$router.push({
        path: '/jgfw'
      })
    },
    jgfwForEquip(){
      this.$router.push({
        path:'/jgfwForEquip'
      })
    },
    //食安资讯
    sazx() {
      this.$router.push('/FoodSafetyinfo')
    },
    //大数据报告
    dsj() {
      this.$router.push('/FsData')
    },
    //语音监管
    yyjg() {
      this.$router.push('/yyjg')
    },
    //明厨亮灶1菜单
    mclz1() {
      this.$router.push('/mclz1')
    },
    //截图问题菜单
    jtwt() {
      this.$router.push('/jtwt')
    },
    logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/login'
        })
      }).catch(() => {
      })
    }
  }
}

</script>
<style scoped>
  /*整体*/
  .topBar {
    background-image: url("../assets/images/menu/menu-bg-new.png");
    background-repeat: repeat-x;
    background-size: 100% 100%;
    box-shadow: 0 5px 15px #02234a;
  }

  /*左侧*/
  .leftBar {
    height: 70px;
    display: flex;
    padding: 10px;
  }

  /*中间菜单整体*/
  .el-menu {
    background-image: url("../assets/images/menu/menu-bg-new.png") !important;
    background-repeat: repeat-x;
    height: 70px;
    overflow: hidden;
  }

    /*没有底边*/
    .el-menu.el-menu--horizontal {
      border-bottom: none;
    }

  /*单个菜单*/
  .el-menu--horizontal > .el-menu-item {
    height: 70px;
    line-height: 70px;
  }

    /*选中菜单样式*/
    .el-menu--horizontal > .el-menu-item.is-active {
      background-image: url("../assets/images/menu/menu-active-bg-new.png");
      background-repeat: repeat-x;
      background-size: 100% 100%;
      border-bottom: 3px solid #1c6cb8;
    }

  /*覆盖原样式*/
  .el-menu-item.is-active {
    border-bottom-color: #1c6cb8 !important;
  }

  /*鼠标悬停样式*/
  .el-menu--horizontal > .el-menu-item:not(.is-disabled):hover, .el-menu--horizontal > .el-menu-item:not(.is-disabled):focus {
    background-color: #1a62bf;
    background-image: url("../assets/images/menu/menu-active-bg-new.png");
    background-repeat: repeat-x;
    background-size: 100% 100%;
    height: 70px;
  }

  /*右侧*/
  .right_box {
    height: 70px;
    line-height: 60px;
    padding: 10px;
    text-align: center;
    color: #FFFFFF
  }

    .right_box > > > img {
      height: 50%;
    }
</style>
